<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title></title>
  <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
  <link rel="stylesheet" href="${ctx}/systemStatic/style/admin.css">
  <link rel="stylesheet" href="${ctx}/iconfont/iconfont.css"/>
  <link rel="stylesheet" href="${ctx}/css/public.css">
  <link href="${ctx}/extends/bootstrap/css/bootstrap-combined.min.css" rel="stylesheet">
  <link href="${ctx}/extends/bootstrap/css/layoutit.css" rel="stylesheet">
  <link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.css' rel='stylesheet'/>
  <link href='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.print.css' rel='stylesheet'
        media='print'/>
  <link rel="stylesheet" href="${ctx}/css/index/layoutPublic.css">
  <script type="text/javascript">
    var __ctx = "${ctx}";
  </script>
  <script src="${ctx}/public/component.js" type="text/javascript"></script>
  <script src="${ctx}/layui/layui.js"></script>
  <script type="text/javascript" src="${ctx}/extends/bootstrap/js/jquery.min.js"></script>
  <script type="text/javascript" src="${ctx}/extends/bootstrap/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="${ctx}/extends/bootstrap/js/jquery-ui.js"></script>
  <script type="text/javascript"
          src="${ctx}/extends/bootstrap/js/jquery.ui.touch-punch.min.js"></script>
  <script type="text/javascript" src="${ctx}/extends/bootstrap/js/jquery.htmlClean.js"></script>
  <script type="text/javascript" src="${ctx}/extends/bootstrap/ckeditor/ckeditor.js"></script>
  <script type="text/javascript" src="${ctx}/extends/echarts.min.js"></script>
  <script src='${ctx}/extends/fullcalendar-2.5.0/lib/moment.min.js'></script>
  <script src='${ctx}/extends/fullcalendar-2.5.0/fullcalendar.js'></script>
  <script type="text/javascript" src='${ctx}/extends/fullcalendar-2.5.0/lang/zh-cn.js'></script>
  <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
  <style>
    .red {
      background: red !important;
    }

    .myBtn {
      height: 30px;
      line-height: 30px;
      padding: 0 24px;
      background: rgba(38, 130, 255, 1);
      border-radius: 2px;
    }
  </style>
</head>
<body style="min-height: 660px; cursor: auto;" class="edit">
<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <button data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar"
              type="button"><span
          class="icon-bar"></span>
        <span class="icon-bar"></span> <span class="icon-bar"></span></button>
      <a class="returnBack" title="返回"><i class="layui-icon">&#xe65c;</i>
        <div class="brand">首页可视化布局</div>
      </a>
      <div class="nav-collapse collapse">
        <ul class="nav" id="menu-layoutit">
          <li class="divider-vertical"></li>
          <li>
            <div class="btn-group" data-toggle="buttons-radio">
              <button type="button" id="edit" class="btn btn-primary active">编辑</button>
              <!--                                 <button type="button" class="btn btn-primary" id="devpreview">布局编辑</button>-->
              <button type="button" class="btn btn-primary" id="sourcepreview">预览</button>
            </div>
            <div class="btn-group">
              <!-- <button type="button" class="btn btn-primary" data-target="#downloadModal" rel="/build/downloadModal" role="button" data-toggle="modal"><i class="icon-chevron-down icon-white"></i>下载</button> -->
              <button class="btn btn-primary saveLay">保存</button>
              <button class="btn btn-primary" href="#clear" id="clear">清空</button>
            </div>
            <div class="btn-group">
              <button class="btn btn-primary" href="#undo" id="undo">后退</button>
              <button class="btn btn-primary" href="#redo" id="redo">前进</button>
            </div>
          </li>
        </ul>
      </div>
      <!--/.nav-collapse -->
    </div>
  </div>
</div>
<div class="container-fluid" style="padding: 0">
  <div class="row-fluid">
    <div class="fixedMenu">
      <div class="sidebar-nav">
      </div>
    </div>
    <!--/span-->
    <div class="demo ui-sortable">


    </div>
    <!--/span-->
    <div id="download-layout">
      <div class="container-fluid"></div>
    </div>
  </div>
  <!--/row-->
</div>
<!--/.fluid-container-->
<div class="modal hide fade" role="dialog" id="editorModal">
  <div class="modal-header"><a class="close" data-dismiss="modal">×</a>
    <h3>编辑</h3>
  </div>
  <div class="modal-body">
    <p>
      <textarea id="contenteditor"></textarea>
    </p>
  </div>
  <div class="modal-footer"><a id="savecontent" class="btn btn-primary" data-dismiss="modal">保存</a>
    <a class="btn" data-dismiss="modal">关闭</a>
  </div>
</div>

<div class="layui-form saveForm" style="display: none;">
  <div class="layui-form-item">
    <label class="layui-form-label">名称</label>
    <div class="layui-input-block">
      <input type="text" name="title" id="title" lay-verify="required" autocomplete="off"
             placeholder="请输入名称"
             class="layui-input" maxlength="50">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">描述</label>
    <div class="layui-input-block">
      <input type="text" name="describe" id="describe" lay-verify="required" placeholder="请输入描述"
             autocomplete="off"
             class="layui-input" maxlength="64">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block" style="text-align: center;margin-top: 7px;margin-left: 90px">
      <span class="layui-btn savaLayoutData">保存</span>
      <span class="layui-btn layui-btn-danger canLayoutData">取消</span>
    </div>
  </div>
</div>
<script type="text/html" id="wQbdFalProblemresetRightToolsBar">
  <a class="RightBtn" lay-event="history">关联分析</a>
</script>
<script>
  layui.config({
    base: serverPath.systemPath + staticPath.systemPath //静态资源所在路径
  }).extend({
    index: 'index' //主入口模块
  }).use(['index', 'layer', 'jquery', 'form', 'setter', 'common', 'commons'], function () {
    var form = layui.form, setter = layui.setter, layer = layui.layer, $ = layui.jquery,
        common = layui.common,
        commons = layui.commons;
    var name = '';
    var des = '';
    var id = '${id}';

    $('.layui-layout-body').addClass('edit');
    $('.layui-layout-body').removeClass('layui-layout-body');

    // 初始化执行文件加载
    function scriptInit() {
      var oScript = document.createElement("script");
      oScript.type = "text/javascript";
      oScript.src = "${ctx}/extends/bootstrap/js/scripts.js";
      document.body.appendChild(oScript);
    }

    function scriptInitIndex() {
      var oScript = document.createElement("script");
      oScript.type = "text/javascript";
      oScript.src = "${ctx}/js/index/indexPage.js";
      document.body.appendChild(oScript);
    }

    // dom构建
    function _createEle(obj, props) {
      var newDom = document.createElement(obj);
      for (var value in props) {
        newDom.setAttribute(value, props[value])
      }
      return newDom
    }

    // 文本节点化
    function _createTextNode(text) {
      return document.createTextNode(text);
    }

    // 批量节点添加
    function _appendChild(parent, child) {
      for (var i = 0; i < child.length; i++) {
        parent.appendChild(child[i])
      }
      return parent
    }

    // 结构拼接
    function dataInit(data) {
      var datalist = [];
      for (var i = 0; i < data.length; i++) {
        var item = data[i];
        var itemData = item.data;
        var itemlist = [];
        for (var j = 0; j < itemData.length; j++) {
          var fragment = _createEle('div', {
            'class': 'view'
          });
          fragment.innerHTML = itemData[j].templateHtml;
          itemlist.push(_appendChild(
              _createEle('div', {
                'class': item.listName === '布局设置' ? 'lyrow ui-draggable'
                    : 'box box-element ui-draggable'
              }),
              [
                _appendChild(
                    _createEle('a', {
                      'class': 'remove label label-important'
                    }),
                    [
                      _createEle('i', {
                        'class': 'icon-remove icon-white'
                      }),
                      _createTextNode('删除')
                    ]
                ),
                _appendChild(
                    _createEle('span', {
                      'class': 'drag label'
                    }),
                    [
                      _createEle('i', {
                        'class': 'icon-remove'
                      }),
                      _createTextNode('拖动')
                    ]
                ),
                _appendChild(
                    _createEle('div', {
                      'class': 'preview'
                    }),
                    [
                      _createEle('input', {
                        'value': itemData[j].name,
                        'type': 'text',
                        'readonly': 'readonly'
                      })
                    ]
                ),
                fragment
              ]
          ))
        }
        var container = _appendChild(
            _createEle('ul', {
              'class': 'nav nav-list accordion-group'
            }),
            [
              _appendChild(_createEle('li', {
                    'class': 'nav-header'
                  }),
                  [
                    _createEle('i', {
                      'class': 'icon-plus icon-white'
                    }),
                    _createTextNode(item.listName)
                  ]
              ),
              _appendChild(
                  _createEle('li', {
                    'class': 'rows',
                    'id': 'estRows'
                  }),
                  itemlist
              )
            ]
        );
        datalist.push(container)
      }
      return datalist
    }

    // 请求左侧init
    $.ajax({
      url: serverPath.systemPath + setter.sysLinkPath + "indexLayoutManage/layoutList",
      type: "GET",
      dataType: 'json',
      success: function (data) {
        if (data.code === 0) {
          var result = dataInit(data.data);
          _appendChild(document.querySelector('.sidebar-nav'), result);
          if (!!id) {
            $.ajax({
              url: serverPath.systemPath + setter.sysLinkPath + "indexLayoutManage/get",
              type: "get",
              dataType: 'json',
              contentType: 'application/json',
              data: {"id": id},
              success: function (data) {
                if (data.code === 0) {
                  var results = data.data;
                  if (results) {
                    $('.demo.ui-sortable').html(results.designHtml);
                    name = results.name;
                    des = results.memo;
                    scriptInit();
                    scriptInitIndex()
                  }
                } else {
                  layer.alert(data.msg);
                }
              }
            })
          } else {
            scriptInit();
            scriptInitIndex();
          }

        } else {
          layer.alert(data.msg);
        }
      },
    });
    // 保存
    $('.saveLay').click(function () {
      $('#title').val(name);
      $('#describe').val(des);
      layer.open({
        type: 1,
        title: '保存',
        shade: 0.001,
        shadeClose: false,
        area: ['420px', '200px'],
        content: $('.saveForm'),
        success: function (layero, index) {
          $(".savaLayoutData").click(function () {
            var title = $('#title').val();
            var desc = $('#describe').val();
            if (title == '') {
              layer.alert('请输入名称');
              return false;
            }
            var info = $('.demo.ui-sortable').html();
            $.ajax({
              url: serverPath.systemPath + setter.sysLinkPath + "indexLayoutManage/save",
              type: "POST",
              dataType: 'json',
              contentType: 'application/json',
              data: JSON.stringify({
                "designHtml": info,
                "memo": desc,
                "name": title,
                "id": id
              }),
              success: function (data) {
                if (commons._filterRecord(data)) {
                  layer.alert(data.msg, function () {
                    layer.close(index);
                    parent.location.href = serverPath.systemPath + setter.sysLinkPath
                        + 'indexLayoutManage/view/list';
                  });
                } else {
                  layer.msg(data.msg);
                }
              }
            })
          });
          $('.canLayoutData').click(function () {
            layer.close(index);
          })

        }
      });
    });
    $('.returnBack').click(function () {
      parent.location.href = serverPath.systemPath + setter.sysLinkPath
          + 'indexLayoutManage/view/list';
    })
  });
</script>

<style>
  .ui-draggable {
    clear: both;
  }

  .fixedMenu {
    position: fixed;
    z-index: 100;
    top: 0;
  }

  .edit .demo {
    min-height: calc(100% - 55px) !important;
    padding: 13px 15px 0 15px;
    background: #fff;
  }

  .container-fluid {
    height: 100%;
  }

  .container-fluid .row-fluid {
    height: 100%;
  }

  .saveForm .layui-form-label { /*保存strart*/
    float: left;
    height: 30px;
    line-height: 30px;
    width: 50px;
    padding: 0;
  }

  .saveForm .layui-input-block {
    float: left;
    margin-left: 20px;
  }

  .saveForm .layui-form-item {
    margin-bottom: 0;
  }

  .saveForm .layui-input-block input {
    float: left;
    height: 30px;
    line-height: 30px;
  }

  .saveForm { /*保存end*/
    width: 300px;
    display: block;
    margin: 20px auto 0 auto;
  }


  .returnBack { /*返回start*/
    cursor: pointer;
    float: left;
    width: 160px;
  }

  .returnBack i {
    float: left;
    margin-right: 20px;
    margin-top: 9px;
  }

  .returnBack .brand { /*返回end*/
    float: left;
  }

  .sidebar-nav { /*侧边菜单start*/
    float: left;
    margin-left: -200px;
    margin-top: 40px;
    overflow: auto;
    height: calc(100vh - 58px) !important;
  }

  .sidebar-nav ul:not(:first-child) li:not(:first-child) { /*侧边菜单end*/
    display: none;
  }
</style>
</body>
</html>